<template>
  <div class="container project_detail">
    <div class="section">
      <h2 class="title">
        基本信息
      </h2>
      <ul class="info">
        <li class="list-item" :hidden="cateHidden">
          <div class="tip">
            项目分类：
          </div>
          <div class="detail">
            {{ project_detail.projectCategoryName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目名称：
          </div>
          <div class="detail">
            {{ project_detail.groupProjectName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            医院名称：
          </div>
          <div class="detail">
            {{ project_detail.hospitalName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            医院地址：
          </div>
          <div class="detail">
            {{ project_detail.locationDes }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目原价：
          </div>
          <div class="detail">
            {{ project_detail.price }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            价格名称：
          </div>
          <div class="detail">
            {{ project_detail.priceName }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目价格：
          </div>
          <div class="detail">
            {{ project_detail.groupPrice }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目销量：
          </div>
          <div class="detail">
            {{ project_detail.projectSales }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            排序：
          </div>
          <div class="detail">
            {{ project_detail.sort }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            是否上架：
          </div>
          <div class="detail">
            {{ project_detail.status==="1"?'是':'否' }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            成团人数：
          </div>
          <div class="detail">
            {{ project_detail.groupSize }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            奖励金额：
          </div>
          <div class="detail">
            {{ project_detail.subsidies === '0.00'?'无' : project_detail.subsidies }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            立减券金额：
          </div>
          <div class="detail">
            {{ project_detail.coupons === null?'无' : project_detail.coupons }}
          </div>
        </li>
      </ul>
    </div>
    <div class="section">
      <h2 class="title">
        项目数据
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            累计发起拼团：
          </div>
          <div class="detail">
            {{ project_data.totalGroupSize }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计成团：
          </div>
          <div class="detail">
            {{ project_data.groupSize }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            累计核销：
          </div>
          <div class="detail">
            {{ project_data.totalCheckedNum }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            分享次数：
          </div>
          <div class="detail">
            {{ project_data.sharedTimes }}
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            升单次数：
          </div>
          <div class="detail">
            {{ project_data.upgradeTimes }}
          </div>
        </li>

      </ul>
    </div>
    <div class="section">
      <h2 class="title">
        分享素材
      </h2>
      <ul v-for="(item, index) in project_detail.copyWriteList" class="info">
        <li class="list-item">
          <div class="tip">
            分享文案：
          </div>
          <div class="detail project_detail">
            <ul
              class="detail-list"
              v-html="item.copyWriteText"
            />
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            分享图片：
          </div>
          <div class="detail">
            <ul class="pic-list">
              <li
                v-for="(item, index) in project_detail.shareImageList"
                :key="index"
                class="pic-item"
              >
                <img
                  :src="common.img_url+item"
                  alt=""
                  class="img"
                >
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="section">
      <h2 class="title">
        图片和详情
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            项目主图：
          </div>
          <div class="detail">
            <ul class="pic-list">
              <li class="pic-item">
                <img
                  :src="common.img_url+project_detail.groupMasterPicture"
                  alt=""
                  class="img"
                >
              </li>
            </ul>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目展示图：
          </div>
          <div class="detail">
            <ul class="pic-list">
              <li
                v-for="(item, index) in project_detail.groupSlavePictureList"
                :key="index"
                class="pic-item"
              >
                <img
                  :src="common.img_url+item"
                  alt=""
                  class="img"
                >
              </li>
            </ul>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            项目详情：
          </div>
          <div class="detail project_detail">
            <ul
              class="detail-list"
              v-html="project_detail.groupDetail"
            />
          </div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import { getProjectDetail, projectDetail } from '../../api/project'
import { appType } from '../../utils/constanst'
export default {
  data() {
    return {
      project_id: 0,
      project_detail: {},
      project_data: {},
      //   分类id
      cate_id: '',
      //   医院id
      hos_id: '',
      cateHidden: true
    }
  },
  created() {
    if (appType === 4) {
      this.cateHidden = false
    }
    if (this.$route.query.id) {
      this.project_id = this.$route.query.id
      this.get_detail()
      this.get_data()
    }
  },
  methods: {
    get_detail() {
      projectDetail({
        id: this.project_id - 0
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.project_detail = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error('服务器网络错误，请稍后重试')
      })
    },
    get_data() {
      getProjectDetail({
        projectId: this.project_id
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.project_data = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        // this.$message.error('服务器网络错误，请稍后重试');
        this.$message.error(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: top;
          width: 130px;
          text-align: right;
        }
        .detail {
          color: #666;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          //   主图 和 项目展示图 列表
          .pic-list {
            .pic-item {
              display: inline-block;
              vertical-align: baseline;
              background-color: #ccc;
              width: 100px;
              height: 100px;
              margin-right: 15px;
              overflow: hidden;
              .img {
                width: 100% !important;
                height: auto;
                display: block;
              }
            }
          }
          //   项目详情图列表
          .detail-list {
            width: 375px;
            border: 1px solid #ccc;
            img {
              width: 100% !important;
              height: auto;
              display: block;
            }
          }
          &.project_detail {
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.project_detail {
  //   项目详情图列表
  .detail-list {
    width: 375px;
    min-height: 750px;
    border: 1px solid #ccc;
    img {
      width: 100% !important;
      height: auto;
      display: block;
    }
  }
}
</style>

